<template>
    <div class="warrper">
        <swiper :options="swiperOption" ref="mySwiper">
           <swiper-slide>
              <div class="page" :style="{height: height}">1</div>
           </swiper-slide> 
           <swiper-slide>
              <div class="page" :style="{height: height}">2</div>
           </swiper-slide> 
           <swiper-slide>
              <div class="page" :style="{height: height}">3</div>
           </swiper-slide> 
        </swiper> 
    </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import * as config from "./config";
export default {
    data() {
        return{
            swiperOption: {
                direction: 'vertical', //控制横向纵向
                height: window.innerHeight,  // 高度设置，占满设备高度
                // effect: 'coverflow',
                effect: 'flip', //设置切换效果
                loop: true, //控制无限滚动
           },
           height: window.innerHeight+"px"
        }
    },
    components:{
        swiper,
        swiperSlide
    },
    methods:{
        
    },
    created(){
       config.initShare();
    },
    mounted(){
        this.global.SHARE_TITLE = "测试一下";
        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/jbact/swiper';
    }
}
</script>
<style lang = "stylus" scoped>
     .warrper{
         position fixed 
         top 0
         left 0
         right 0
         bottom 0
         background #030303
     }
     .page{
         width 100%
         height 100%
         color #ffffff
         text-align center
         background #303030
     }
</style>


